<!--
 * @Date: 2024-11-04 10:33:27
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-11-06 16:39:52
 * @Description: 表格工具栏的按钮配置表
-->
<template>
  <div style="height: 100%;">
    <VfDataTable
      ref="tableRef"
      :="tableAttrs"
      :columns="tableColumns"
    >
      <template #toolbar_left>
        <el-button plain size="small" type="primary"
          @click="toolBtnOperate('add')">新增</el-button>
        <el-button plain size="small" type="danger"
          @click="toolBtnOperate('delete')">删除</el-button>
      </template>
      <template #visible_render="{ row, column }">
        <el-button
          size="small" round :icon="Edit"
          :type="row['visibleFunc'] ? 'primary' : 'default'"
          @click="tableRowOperate('visible', { row, column })"
        />
      </template>
      <template #drag_lot>
        <VfIcon name="move" class="drag-btn" />
      </template>
    </VfDataTable>
    <btns-visiable-dialog ref="btnsVisibleRef" :paramText="visiableParamText"/>
  </div>
</template>

<script setup lang="jsx">
import Sortable from 'sortablejs';
import { Edit } from '@element-plus/icons-vue'

import { VfDataTable } from '@/components/vf-table';
import { ButtonSizes } from '@/base/pojo/ButtonSize'
import { ButtonTypes } from '@/base/pojo/ButtonType'
import BtnsVisiableDialog from '../BtnsVisiableDialog.vue'

import { VfMessage, VfUtils } from '@/utils/vf-utils'
import { reactive, ref, nextTick, onMounted } from 'vue';

const props = defineProps({
  // 是否链接按钮
  btnLink: { type: Boolean, default: false },
  // 按钮类型
  btnType: { type: String, default: 'default' },
  // 按钮配置数据
  btnsData: { type: Array, default: () => ([]) },
  // 是否可见方法参数
  visiableParamText: { type: String, default: 'btnItem, queryParams' }
})

const tableRef = ref()
const tableAttrs = reactive({
  data: props.btnsData,
  stripe: false,
  columns: [],
  loading: false,
  keyField: 'id',
  minHeight: 350,
  boxConfig: true,
  seqConfig: false,
  pagerConfig: false,
  showOverflow: 'ellipsis',
  toolbarConfig: { enabled: true, refresh: false },
  checkboxConfig: { checkStrictly: false },
})
const tableColumns = reactive([
  {
    field: 'dragLot',
    title: '',
    width: 50,
    align: 'center',
    sortable: false,
    className: 'drag-cell',
    slots: { default: 'drag_lot' },
  },
  {
    field: 'value',
    title: '标识',
    width: 120,
    align: 'left',
    sortable: false,
    slots: { default: params => editColInput(params) },
  },
  {
    field: 'label',
    title: '名称',
    width: 120,
    align: 'left',
    sortable: false,
    slots: { default: params => editColInput(params) },
  },
  {
    field: 'type',
    title: '类型',
    width: 120,
    align: 'left',
    sortable: false,
    slots: { default: params => editColSelect(params, ButtonTypes.getData()) },
  },
  {
    field: 'size',
    title: '尺寸',
    width: 120,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSelect(params, ButtonSizes.getData()) },
  },
  {
    field: 'visible',
    title: '是否可见',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSwitch(params) },
  },
  {
    field: 'visibleFunc',
    title: '条件可见',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: 'visible_render' },
  },
  {
    field: 'round',
    title: '圆角按钮',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSwitch(params) },
  },
  {
    field: 'circle',
    title: '圆形按钮',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSwitch(params) },
  },
  {
    field: 'plain',
    title: '朴素按钮',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSwitch(params) },
  },
  {
    field: 'text',
    title: '文字按钮',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSwitch(params) },
  },
  {
    field: 'link',
    title: '链接按钮',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSwitch(params) },
  },
  {
    field: 'disabled',
    title: '是否禁用',
    width: 80,
    align: 'center',
    sortable: false,
    slots: { default: params => editColSwitch(params) },
  },
])
/**
 * 获取表格数据
 */
const getTableData = () => {
  const tableData = JSON.parse(JSON.stringify(tableAttrs.data))
  let emptyRows = []
  let resultRows = []
  for (let row of tableData) {
    if (row.value && row.label) {
      resultRows.push(row)
    } else {
      emptyRows.push(row)
    }
  }
  if (emptyRows.length) {
    VfMessage.warning('存在空标识与空名称数据，将自动去除！')
  }
  return resultRows
}
/**
 * 表格工具栏按钮操作
 * @param type 类型
 */
const toolBtnOperate = (type) => {
  const { value: gridRef } = tableRef
  if (type === 'add') {
    const rowItem = {
      id: VfUtils.getUUID(),
      icon: '',
      size: 'default',
      type: props.btnType || 'default',
      value: '',
      label: '',
      link: props.btnLink || false,
      text: false,
      round: false,
      color: '',
      plain: false,
      circle: false,
      visible: true,
      disabled: false,
      visibleFunc: '',
    }
    gridRef.insertAt(rowItem, -1)
    reloadTableData()
  }
  if (type === 'delete') {
    gridRef.removeCheckboxRow()
    reloadTableData()
  }
}
/**
 * 刷新表格数据
 */
const reloadTableData = () => {
  const { value: gridRef } = tableRef
  nextTick(() => {
    const { tableData } = gridRef?.getTableData()
    tableAttrs.data = [ ...tableData ]
  })
}

const btnsVisibleRef = ref()
const tableRowOperate = (type, { row }) => {
  if (type === 'visible') {
    btnsVisibleRef.value.handleOpen(row)
  }
}
// ----- col render
const editColInput = ({ row, column }) => {
  return [
    <el-input size='default' placeholder="请输入" v-model={row[column.field]} />
  ];
}
const editColSelect = ({ row, column }, options) => {
  return [
    <vxe-select
      size='default'
      v-model={row[column.field]}
      transfer={true}
      clearable={false}
      placeholder='请选择'
      popup-class-name='designer-select-fixed'
    >
      {options.map(item => {
        return [<vxe-option key={item.value} label={item.label} value={item.value} />];
      })}
    </vxe-select>,
  ]
}
const editColSwitch = ({ row, column }) => {
  return [
      <el-switch
        v-model={row[column.field]}
        inline-prompt
        active-text='是'
        inactive-text='否'
        size='default'
      />
    ];
}

/**
 * 初始化排序
 */
const initSortable = () => {
  const { value: gridRef } = tableRef;
  nextTick(() => {
    Sortable.create(gridRef.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
        handle: '.drag-btn',
        onEnd: ({ newIndex, oldIndex }) => {
          const currRow = tableAttrs.data.splice(oldIndex, 1)[0];
          tableAttrs.data.splice(newIndex, 0, currRow);
        }
    });
  })
}

onMounted(() => {
  // 初始化拖拽排序
  initSortable();
})

defineExpose({
  getTableData
})

</script>

<style lang="scss" scoped>

</style>